<template lang="html">
    <div class="page-group">
        <!-- 单个page ,第一个.page默认被展示-->
        <div class="page page-current">
            <!-- 这里是页面内容区 -->
            <div class="content native-scroll">
                <div class="content-block">
                    <!-- Home -->
                    <div class="home">
                        <div class="home_page">
                            <div class="home_logo img-full">
                                <img src="../../img/home_logo.png" alt="食安笑脸地图">
                            </div>
                            <form id="myform">
                                <div class="home_search">
                                    <select v-model="selected">
                                                      <option >请选择业态</option>
                                                    <option v-for="option in options" v-bind:value="option.id">  
                                                        {{ option.name}}  
                                                    </option>  
                                                </select>
                                    <input name="keyword" type="text" v-model="seachtext" class="home_shadow" placeholder="搜索：地点、饭店">
                                </div>
                                <div class="home_btn">
                                    <div @click="mapseach()" class="h_btn search_btn pull-left">
                                        搜索
                                    </div>
                                    <div class="h_btn near_btn pull-right">
                                        <router-link :to='{name:"Mapnearby"}'>附近笑脸餐厅</router-link>
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <input type="hidden" name="__hash__" value="c9920fdb1a475605a4b93024043d49ab_d16236a9be08091444cb67496bb142f0"></form>
                                <div class="home_face">
                                <div class="img-box">
                                    <router-link :to='{name:"Maplist", query: {seachtext:"",type:""}}'><img src="../../img/home_y.png" alt="优"></router-link>
                                </div>
                                <div class="img-box">
                                    <a @click="data_none()"><img src="../../img/home_l.png" alt="良"></a>
                                </div>
                                <div class="img-box">
                                    <a @click="data_none()"><img src="../../img/home_c.png" alt="一般"></a>
                                </div>
                                <div class="clear"></div>
                            </div>
                            <div class="home_foot">
                                <h2>跟随笑脸就餐，确保食品安全！</h2>
                                <p>茌平县食品药品监督管理局监制</p>
                            </div>
                        </div>
                    </div>
    
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    import {
        GetTocken,
        EnterpriseCPData
    } from '../../api/api';
    import {
        Toast
    } from 'mint-ui';
    export default {
        components: {
    
        },
        data() {
            return {
                seachtext: '',
                selected: '请选择业态',
                options: [{
                        id: "-2",
                        name: "食品生产"
                    },
                    {
                        id: "-1",
                        name: "食品流通"
                    },
                    {
                        id: "0",
                        name: "餐饮服务"
                    },
                    {
                        id: "10",
                        name: "药品生产"
                    },
                    {
                        id: "11",
                        name: "药品经营"
                    }
                ]
    
            };
        },
        created() {
            this.MakeToken();
        },
        //方法
        methods: {
            data_none: function() {
                Toast({
                    message: '提示信息:该功能暂时未开发，敬请等待',
                    position: 'top',
                    duration: 5000
                });
            },
            mapseach: function() {
                if (this.selected == '请选择业态') {
                    this.optionselect = ''
                } else {
                    this.optionselect = this.selected
                }
                this.$router.push({
                    name: 'Maplist',
                    query: {
                        seachtext: this.seachtext,
                        type: this.optionselect
                    }
                })
            },
            MakeToken: function() {
                let options = {
                    params: {
                        ids: '95e99bb146644b2cb8ba43e9b6288306'
                    }
                }
                GetTocken(options).then((res) => {
                    let token = res.data
                    if (res.success == true) {
                        localStorage.setItem('tokendata', JSON.stringify({
                            token: res.data,
                        }));
                        return
                    }
                })
            },
        },
        mounted() {}
    }
</script>

<style lang="scss" scoped>
    #myform {
        overflow: hidden;
    }
    
    .page {
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #efeff4;
    }
    
    .page-group {
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #efeff4;
        overflow: hidden;
    }
    
    .page-current {
        background: url(../../img/home_bg.jpg);
        background-size: cover;
    }
    
    #default .content .content-block {
        margin: 0 auto;
        padding: 0;
    }
    
    .home_search {
        position: relative;
        select {
            position: absolute;
            top: 15px;
            left: 0px;
            padding-left: 5px;
            border: none;
            height: 33px;
            box-sizing: border-box;
            color: #757575;
            background: #fff;
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
        }
    }
    
    .home_page {
        width: 80%;
        margin: 0 auto;
        position: relative;
        overflow-y: auto;
    }
    
    .home_logo {
        padding-top: 6.5rem;
    }
    
    .img-full,
    .img-full img {
        width: 100%;
    }
    
    .home_shadow {
        width: 100%;
        height: 2.2rem;
        background: #fff;
        border: none;
        padding: 0 0rem 0rem 80px;
        border-radius: 0;
        margin-top: 15px;
        // text-indent: .8rem;
    }
    
    .home_btn {
        padding: 2rem 0rem 0 0;
        .h_btn {
            height: 2.5rem;
            line-height: 2.5rem;
            background: #ffd83d;
            color: #4b3009;
            font-size: 1rem;
            text-align: center;
            display: block;
            width: 8rem;
        }
    }
    
    .pull-left {
        float: left;
    }
    
    .pull-right {
        float: right;
        ;
    }
    
    .home_face {
        margin: 3.5rem 0 0;
        overflow: hidden;
        display: -webkit-flex;
        /* Safari */
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    .img-box {
        width: 4rem;
        margin: 0 1.8rem;
        float: left;
    }
    
    .home_foot {
        padding-top: 2.5rem;
        color: #fff;
        text-align: center;
        h2 {
            height: 2.5rem;
            line-height: 2.5rem;
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 0;
        }
        p {
            height: 2.4rem;
            /* line-height: 2.4rem; */
            font-size: 1rem;
            padding: 0;
            margin: 0;
        }
    }
</style>
